<template>
	<view class="headerBar">
		<view class="headerContent">
			<view class="area">
				<span>杭州</span>
				<svg t="1743645842963" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4307"><path d="M298.666667 328.789333L512 640l213.333333-311.210667z" p-id="4308" fill="#ffffff"></path></svg>
			</view>
			<view class="titleLogo">
				<img src="../../static/home/logo.svg" alt="" />
				<view class="title-holo">
					HoloCare
				</view>
				<view class="title-desc">
					·数字医院
				</view>
			</view>
			<view class="title-tools">
				<view class="gold">
					<svg t="1743646964079" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="21111" width="28" height="28"><path d="M512 528m-398 0a398 398 0 1 0 796 0 398 398 0 1 0-796 0Z" fill="#F2814E" p-id="21112"></path><path d="M512 496m-398 0a398 398 0 1 0 796 0 398 398 0 1 0-796 0Z" fill="#FFDC88" p-id="21113"></path><path d="M512 496m-282 0a282 282 0 1 0 564 0 282 282 0 1 0-564 0Z" fill="#FFBC54" p-id="21114"></path><path d="M512 180.668c174.036 0 315.332 141.296 315.332 315.332S686.036 811.332 512 811.332 196.668 670.036 196.668 496 337.964 180.668 512 180.668z m0 33.332c-155.64 0-282 126.36-282 282s126.36 282 282 282 282-126.36 282-282-126.36-282-282-282z" fill="#FA7B4D" p-id="21115"></path><path d="M512 180.668c174.036 0 315.332 141.296 315.332 315.332S686.036 811.332 512 811.332 196.668 670.036 196.668 496 337.964 180.668 512 180.668z m0 33.332c-155.64 0-282 126.36-282 282s126.36 282 282 282 282-126.36 282-282-126.36-282-282-282z" fill="#FA7B4D" p-id="21116"></path><path d="M257.4 801.828c14.168-7.124 31.124-14.42 36.6-35.828 20.132-78.676 424-508 424-508s0.372-52.644 29.852-82.536C846.172 247.96 910 364.584 910 496c0 219.664-178.336 398-398 398-96.8 0-185.572-34.632-254.6-92.172z" fill="#F47A38" fill-opacity=".5" p-id="21117"></path><path d="M716.296 301.688a30.104 30.104 0 0 1-0.228-41.464c1.24-1.488 1.932-2.224 1.932-2.224v-0.144a0.188 0.188 0 0 1 0.044-0.24 0.188 0.188 0 0 1 0.244 0c66.784 57.816 109.044 143.204 109.044 238.384 0 174.036-141.296 315.332-315.332 315.332-72.76 0-139.8-24.696-193.18-66.156a14.96 14.96 0 0 1-3.216-19.928l-0.036-0.02a18.172 18.172 0 0 1 26.248-4.452C389.112 756.692 448.088 778 512 778c155.64 0 282-126.36 282-282 0-75.284-29.564-143.716-77.704-194.312z" fill="#FFBA58" p-id="21118"></path><path d="M496.016 347.784a19.664 19.664 0 0 1 31.968 0l52.38 73.068a19.668 19.668 0 0 0 10.028 7.284l85.676 27.236a19.668 19.668 0 0 1 9.88 30.404l-53.308 72.396a19.668 19.668 0 0 0-3.828 11.788l0.572 89.896a19.668 19.668 0 0 1-25.864 18.792l-85.324-28.324a19.656 19.656 0 0 0-12.392 0l-85.324 28.324a19.664 19.664 0 0 1-25.864-18.792l0.572-89.896a19.668 19.668 0 0 0-3.828-11.788l-53.308-72.396a19.668 19.668 0 0 1 9.88-30.404l85.676-27.236a19.668 19.668 0 0 0 10.028-7.284l52.38-73.068z" fill="#FA7F4B" p-id="21119"></path><path d="M496.016 327.004a19.664 19.664 0 0 1 31.968 0l52.38 73.068a19.668 19.668 0 0 0 10.028 7.284l85.676 27.236a19.68 19.68 0 0 1 9.88 30.408l-53.308 72.392a19.668 19.668 0 0 0-3.828 11.788l0.572 89.9a19.664 19.664 0 0 1-25.864 18.792l-85.324-28.328a19.656 19.656 0 0 0-12.392 0l-85.324 28.328a19.668 19.668 0 0 1-25.864-18.792l0.572-89.9a19.668 19.668 0 0 0-3.828-11.788L338.052 465a19.68 19.68 0 0 1 9.88-30.408l85.676-27.236a19.668 19.668 0 0 0 10.028-7.284l52.38-73.068z" fill="#FFBC54" p-id="21120"></path><path d="M338.444 461.512a25.548 25.548 0 0 1 17.3-29.404l76.008-24.16a25.564 25.564 0 0 0 13.02-9.46l46.468-64.82a25.54 25.54 0 0 1 41.52 0l46.468 64.82a25.564 25.564 0 0 0 13.02 9.46l76.008 24.16a25.548 25.548 0 0 1 16.16 33.36c-49.228 10.14-104.98 15.864-164.024 15.864-66.332 0-128.508-7.224-181.948-19.82z" fill="#FFEA8D" p-id="21121"></path><path d="M787.368 557.016a17.312 17.312 0 0 1 21.992-12.948c0.376 0.124 0.752 0.236 1.124 0.356a14.752 14.752 0 0 1 10.016 17.036c-18.42 87.196-72.936 161.14-147.148 205.464a15.988 15.988 0 0 1-21.116-4.48l0.016-0.016a17.24 17.24 0 0 1 5.224-24.844c65.064-39.296 113.004-104.128 129.892-180.568z" fill="#FFED8C" p-id="21122"></path></svg>
					<span style="font-size: 18rpx;">签到</span>
				</view>
				<view class="message">
					<uv-icon name="chat" color="#fff" size="28"></uv-icon>
					<text class="dot">2</text>
				</view>
			</view>
		</view>
		<view class="headerInput">
			<uv-form>
				<uv-form-item>
					<uv-input
						class="search-input"
						shape="circle"
						placeholder="皮肤科"
						placeholderStyle="color:#aaa0a6"
						prefixIcon="scan"
						prefixIconStyle="font-size: 22px;color: #2b323f"
					>
					<template v-slot:suffix>
						<button class="search-button">搜索</button>
					</template>
					</uv-input>
				</uv-form-item>
			</uv-form>
		</view>
	</view>
	<view class="sticky-top" v-show="isShow">
		<view class="area">
			<span>杭州</span>
			<svg t="1743645842963" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4307"><path d="M298.666667 328.789333L512 640l213.333333-311.210667z" p-id="4308" fill="#ffffff"></path></svg>
		</view>
		<view class="headerInput">
			<uv-form>
				<uv-form-item>
					<uv-input
						class="search-input"
						shape="circle"
						placeholder="皮肤科"
						placeholderStyle="color:#aaa0a6"
						prefixIcon="scan"
						prefixIconStyle="font-size: 22px;color: #2b323f"
					>
					<template v-slot:suffix>
						<button class="search-button">搜索</button>
					</template>
					</uv-input>
				</uv-form-item>
			</uv-form>
		</view>
		<view class="message">
			<uv-icon name="chat" color="#fff" size="28"></uv-icon>
			<text class="dot">2</text>
		</view>
	</view>
	<scroll-view scroll-y class="content">
		<view class="bigIcon">
			<view class="inner-box">
				<img src="../../static/home/quick.png" alt="" />
				<text class="box-title">快速问诊</text>
				<text class="box-desc">3分钟内医生接诊</text>
			</view>
			<view class="inner-box">
				<miniBtn class="live-btn">实时</miniBtn>
				<img src="../../static/home/doc.png" alt="" />
				<text class="box-title">专家问诊</text>
				<text class="box-desc">名医专家 在线问诊</text>
			</view>
			<view class="inner-box">
				<img src="../../static/home/med.png" alt="" />
				<text class="box-title">专病服务</text>
				<text class="box-desc">守护式病程管理</text>
			</view>
		</view>
		<view class="register-box">
			<img src="../../static/tabbar/health_selected.png" alt="" />
			<view class="text-box">
				<text>&ensp;去挂号</text>
				<text>&ensp;/&ensp;由挂号网在线提供</text>
			</view>
			<uv-icon color="#000" class="right_icon" name="arrow-right"></uv-icon>
		</view>
		<view class="grid-icon">
			<uv-grid :col="4">
				<uv-grid-item v-for="item in navList" :key="item.navid">
					<img style="width: 80rpx;" :src="item.imgurl" alt="" />
					<text class="grid-text">{{item.title}}</text>
				</uv-grid-item>
			</uv-grid>
		</view>
		<view class="banner-box">
			<swiper class="banner-swiper"  :style="{height: swiperHeight + 'rpx'}" :indicator-dots="true" :autoplay="false" :interval="800" :duration="1000" circular>
				<swiper-item class="banner-item" v-for="item in bannerList" :key="item.imageUrl">
					<img :src="item.imageUrl" alt="" />
				</swiper-item>
			</swiper>
		</view>
		<view class="expert-area">
			<view class="area-box-top">
				<areaBox v-for="item in areaListTop" :bgi="item.imageUrl" :key="item.id">
				  <template #title>
					<span class="title">{{item.title}}</span>
				  </template>
				  <template #desc1>
					<span class="desc">{{item.desc1}}</span>
				  </template>
				  <template #desc2>
					<span class="desc">{{item.desc2}}</span>
				  </template>
				</areaBox>
			</view>
			<view class="area-box-bottom">
				<areaBox v-for="item in areaListBottom" :bgi="item.imageUrl" :kuan="88" :key="item.id">
				  <template #title>
					<span class="title">{{item.title}}</span>
				  </template>
				  <template #desc1>
					<span class="desc">{{item.desc1}}</span>
				  </template>
				  <template #desc2>
					<span class="desc">{{item.desc2}}</span>
				  </template>
				</areaBox>
			</view>
		</view>
		<view class="bottom-list-area">
			<uv-tabs @change="changeTab" :list="list" :itemStyle="{padding: '0 48rpx 0 0',height: '88rpx',margin: 0}" :inactiveStyle="{color:'#28354C'}" lineWidth="48rpx" lineHeight="8rpx" :activeStyle="{fontSize: '36rpx',fontWeight: 700, color:'#28354C'}"></uv-tabs>
			<!-- 写切换的地方,页面? 还是直接写? -->
			
			<!-- 医师推荐 -->
			<view class="doctor-recom" v-show="currentIndex === 0">
				<!-- 切换类 -->
				<uv-tabs :list="depart" lineWidth="0" :inactiveStyle="{border: '1px solid #ccc', borderRadius: '6rpx',padding: '6rpx 24rpx',fontSize: '28rpx'}" :activeStyle="{fontSize: '28rpx', padding: '6rpx 24rpx',backgroundColor: '#4086ff', borderRadius: '6rpx', color: '#fff'}" :itemStyle="{padding: '0 20rpx 0 0',height: '88rpx',margin: 0}">
					<template v-slot:right>
						<view style="padding-left: 4px;box-shadow: rgb(182 182 182) -3px 0px 3px;background-color: #f5f6fa;">
							<uv-icon name="list" size="26" bold></uv-icon>
						</view>
					</template>
				</uv-tabs>
			
				<!-- 内容推荐 -->
				<view class="flex-recommend">
					<recomDoc :key="item._id" v-for="item in recommendDoc" :tags="item.tags">
						<template #hosLevel>
							{{item.hospitalLevel}}
						</template>
						<template #hos>
							{{item.hospital}}
						</template>
						<template #keshi>
							{{item.department}}
						</template>
						<template #docName>
							{{item.name}}
						</template>
						<template #docTitle>
							{{item.title}}
						</template>
						<template #price>
							{{item.price}}
						</template>
					</recomDoc>
				</view>
			</view>
			<!-- 好物推荐 -->
			<view class="good-thing" v-show="currentIndex === 1">
				<goodThing class="good-thing-box" v-for="item in goodThingList" :list="item" :key="item._id"></goodThing>
			</view>	
			<!-- 文章推荐 -->
			<view class="article-recommend" v-show="currentIndex === 2">
				<recomArticle v-for="item in articleList" :key="item._id" :list="item"></recomArticle>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
import { getBannerListFn, getNavListFn, getAreaListFn, getDoctorListFn, getProListFn, getAllArticlesFn } from '../../api/home';
import { onPageScroll  } from '@dcloudio/uni-app'
const navList = ref([])
const swiperHeight = ref(160)
// 轮播图
const bannerList = ref([])
// 上面
const areaListTop = ref([])
// 下面
const areaListBottom = ref([])

// 切换数组
const list = ref([{name: '医生推荐'}, {name: '好物推荐'}, {name: '健康科普'}])
const currentIndex = ref(0)

// 获取科分类数组
const depart = ref([{name: '全部'},{name: '皮肤科'},{name: '妇科'},{name: '神经内科'},{name:'心血管内科'},{name:'呼吸内科'},{name:'消化内科'},{name:'普外科'},{name:'泌尿外科'},{name:'耳鼻咽喉科'},{name:'中医内科'},{name:'精神科'},{name:'心电诊断科'},{name:'妇产科综合'},{name:'小儿内科'},{name:'眼科综合'}])

// 获取推荐医生的数据
const recommendDoc = ref([])
// 获取好物推荐商品
const goodThingList = ref([])
// 获取文章推荐数组
const articleList = ref([])

// 监听页面滚动
const isShow = ref(false)
onPageScroll(e=>{
	if(e.scrollTop > 200){
		isShow.value = true
	}else {
		isShow.value = false
	}
})
// 切换导航
function changeTab (index) {
	currentIndex.value = index.index
}
onMounted(()=>{
	navList.value = getNavListFn()
	getBannerListFn().then(res=>{
		bannerList.value = res.data
	})
	getAreaListFn().then(res=>{
		areaListTop.value = res.data.slice(0,2)
		areaListBottom.value = res.data.slice(2)
	})
	// 医生推荐
	getDoctorListFn().then(res=>{
		recommendDoc.value = res.data
	})
	// 好物推荐
	getProListFn().then(res=>{
		goodThingList.value = res.data.data
	})
	// 文章分享
	getAllArticlesFn().then(res=>{
		articleList.value = res.data.data
	})
})
</script>

<style scoped lang="scss">
	.sticky-top{
		position: fixed;
		top: 0;
		left: 0;
		background-color: #457eff;
		width: 100%;
		height: 186rpx;
		z-index: 2;
		color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 60rpx;
		.area{
			display: flex;
			font-size: 32rpx;
			margin: 0 30rpx 10rpx 25rpx;
			span{
				white-space: nowrap;
			}
			svg{
				width: 32rpx;
				height: 32rpx;
				transform: translate(-2rpx,7rpx);
			}
		}
		.message{
			width: 56rpx;
			height: 56rpx;
			margin: 10rpx 25rpx 0 20rpx;
			position: relative;
			.uv-icon{
				transform: translate(0, -6rpx);
			}
			.dot{
				display: inline-block;
				position: absolute;
				right: 0;
				top: -7rpx;
				width: 24rpx;
				height: 24rpx;
				background-color: red;
				border-radius: 50%;
				text-align: center;
				line-height: 20rpx;
				font-size: 15rpx;
			}
		}
		.search-input{
			width: 50%;
			margin: 0 30rpx;
			background-color: #fff;
			padding: 0 10rpx;
			.search-button{
				width: 100%;
				height: 50rpx;
				border-radius: 25rpx;
				font-size: 25rpx;
				white-space: nowrap;
				color: #457eff;
				font-weight: bold;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
	}
	.headerBar{
		width: 100%;
		height: 360rpx;
		background: url("/static/home/bgi.png") no-repeat center/cover;
		padding: 20rpx;
		padding-top: 88rpx;
		position: relative;
		.headerContent{
			display: flex;
			color: white;
			justify-content: space-between;
			.area{
				font-size: 32rpx;
				svg{
					width: 32rpx;
					height: 32rpx;
					transform: translate(-2rpx,7rpx);
				}
			}
			.titleLogo{
				display: flex;
				align-items: center;
				transform: translateY(-3rpx);
				img{
					width: 38rpx;
					height: 32rpx;
					margin-right: 6rpx;
				}
				.title-holo{
					
				}
				.title-desc{
					font-size: 30rpx;
				}
			}
			.title-tools{
				display: flex;
				.gold{
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					svg{
						width: 38rpx;
						height: 38rpx;
					}
					span{
						transform: translateY(-12rpx);
					}
				}
				.message{
					width: 56rpx;
					height: 56rpx;
					margin-left: 10rpx;
					position: relative;
					.uv-icon{
						transform: translate(0, -6rpx);
					}
					.dot{
						display: inline-block;
						position: absolute;
						right: 0;
						top: -7rpx;
						width: 24rpx;
						height: 24rpx;
						background-color: red;
						border-radius: 50%;
						text-align: center;
						line-height: 20rpx;
						font-size: 15rpx;
					}
				}
			}
		}
		.headerInput{
			position: absolute;
			width: 100%;
			left: 0;
			bottom: 30rpx;
			.search-input{
				width: 100%;
				margin: 0 30rpx;
				background-color: #fff;
				padding: 0 10rpx;
				.uv-input__content{
					background-color: #fff;
				}
				.search-button{
					width: 100%;
					height: 50rpx;
					border-radius: 25rpx;
					font-size: 25rpx;
					white-space: nowrap;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					background-image: linear-gradient(90deg, #9abeff, #3471fd);
				}
			}
		}
	}
	.content{
		background-color: #f5f6fa;
		padding: 30rpx;
		.bigIcon{
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			.inner-box{
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 100%;
				position: relative;
				.live-btn{
					position: absolute;
					right: 0;
					top: 0;
				}
				img{
					width: 138rpx;
					height: 138rpx;
				}
				.box-title{
					font-size: 36rpx;
					color: #2b354c;
					font-weight: 700;
				}
				.box-desc{
					color: #9d9ea7;
					font-size: 24rpx
				}
			}
		}
		.register-box{
			display: flex;
			align-items: center;
			height: 112rpx;
			margin: 10rpx;
			margin-top: 30rpx;
			border-radius: 20rpx;
			border: 4rpx solid #e1ecf6;
			background-color: #e6efff;
			padding: 0 40rpx;
			img{
				width: 80rpx;
				height: 74rpx;
			}
			.text-box{
				flex: 1;
				display: flex;
				align-items: center;
				transform: translateY(-6rpx);
				text:first-child{
					font-size: 36rpx;
					color: #2d3340;
				}
				text:last-child{
					font-size: 26rpx;
					color: #7c7f8e;
				}
			}
		}
		.grid-icon{
			padding: 0 30rpx;
			margin-bottom: 30rpx;
			.uv-grid-item{
				margin-top: 20rpx;
				.grid-text{
					font-size: 28rpx;
					color: #2b313d;
				}
			}
		}
		/* 配套样式 */
		.banner-swiper {
		  width: 100%;
		  margin-bottom: 30rpx;
		  border: 1px solid #d8d8d8;
		  border-radius: 20rpx;
		  overflow: hidden;
		  .banner-item {
		    height: 100%;
		    
		    img {
		      height: 100%;
		      width: 100%;
		    }
		  }
		}
		.expert-area{
			display: flex;
			gap: 30rpx;
			flex-direction: column;
			flex-wrap: nowrap;
			.area-box-top{
				flex: 1;
				display: flex;
				gap: 30rpx;
				
			}
			.area-box-bottom{
				flex: 1;
				display: flex;
				gap: 30rpx;
				
			}
		}
		// 下边内容
		.bottom-list-area{
			margin-bottom: 132rpx;
			// 医生推荐
			.doctor-recom{
				
				.flex-recommend{
					display: flex;
					gap: 20rpx;
					flex-wrap: wrap;
				}
			}
			// 好物推荐
			.good-thing{
				margin-top: 20rpx;
				display: flex;
				gap: 20rpx;
				flex-wrap: wrap;
			}
			.article-recommend{
				margin-top: 20rpx;
				display: flex;
				flex-direction: column;
				gap: 20rpx;
			}
		}
	}
</style>
